<template>
  <view class="container">
   
    
    <!-- 网页显示区域 -->
    <web-view 
      :src="url"
      @message="handleMessage"
      @loadstart="handleLoadStart"
      @loadprogress="handleLoadProgress"
      @loadstop="handleLoadStop"
      @loadfail="handleLoadFail"
    ></web-view>
    
    <!-- 加载失败提示 -->
    <view v-if="loadFailed" class="load-failed">
      <text>页面加载失败</text>
      <button @click="reloadPage">重新加载</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      url: '',
      loading: true,
      loadFailed: false
    }
  },
  onLoad(options) {
    console.log('打印传来的参数',options);
    if (options.url) {
      this.url = decodeURIComponent(options.url);
      console.log('打印url',this.url);
      this.loadPage();
    } else {
      this.loadFailed = true;
      this.loading = false;
    }
  },
  methods: {
    // 加载页面
    loadPage() {
      this.loading = true;
      this.loadFailed = false;
    },
    
    // 重新加载页面
    reloadPage() {
      this.loadPage();
    },
    
    // 处理网页消息
    handleMessage(e) {
      console.log('接收到网页消息:', e.detail);
      // 可以在这里处理网页传递过来的消息
    },
    
    // 页面开始加载
    handleLoadStart() {
      this.loading = true;
      this.loadFailed = false;
      console.log('页面开始加载');
    },
    
    // 页面加载进度
    handleLoadProgress(e) {
      console.log('页面加载进度:', e.detail);
    },
    
    // 页面加载完成
    handleLoadStop() {
      this.loading = false;
      console.log('页面加载完成');
    },
    
    // 页面加载失败
    handleLoadFail() {
      this.loading = false;
      this.loadFailed = true;
      console.log('页面加载失败');
    }
  }
}
</script>

<style scoped>
.container {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.loading {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  color: #999;
  font-size: 28rpx;
}

.load-failed {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  color: #ff4d4f;
}

.load-failed button {
  margin-top: 30rpx;
  padding: 10rpx 40rpx;
  background-color: #007AFF;
  color: white;
  border-radius: 8rpx;
  font-size: 28rpx;
}
</style>